<?php // no direct access
defined( '_JEXEC' ) or die( 'Restricted access' ); ?>

<?php
// $document = JFactory::getDocument();
global $document;
$document->addScript('media/mod_sstable1/quickflip2/jquery.quickflip.source.js');
$document->addScript('media/mod_sstable1/fancybox/source/jquery.fancybox.js?v=2.1.5');
$document->addStyleSheet('media/mod_sstable1/fancybox/source/jquery.fancybox.css?v=2.1.5');
?>

<style type="text/css">
#home-details table {
	border-spacing: 5px;
	border-collapse: separate;
	border: none !important;
}

.flipelm {
	cursor: pointer;
}
</style>

<?php 
	function getImgFullSizePath($thumbPath){
		$imgfullsizepath = $thumbPath;
		$imgfullsizepath = str_replace('images/thumbnail/', '', $imgfullsizepath);
		return 'images/sampledata'.substr($imgfullsizepath, strpos($imgfullsizepath, '/'));
	}
?>

<?php 
	$imgs = modSstable1Helper::getImgRandom();
	$imgs205 = modSstable1Helper::getImg205Random();
// 	print_r($imgs);
	
	$divider = 4;
	$num_of_imgs = count($imgs);

	$num_of_flip1 = ceil($num_of_imgs/$divider);
	$num_of_flip2 = ceil($num_of_imgs/$divider);
	$num_of_flip3 = floor($num_of_imgs/$divider);
	$num_of_flip4 = $num_of_imgs - ($num_of_flip1+$num_of_flip2+$num_of_flip3);
	
	$i=0;
	$j=0;
	
// 	$test_path = 'images/thumbnail/100/Gallery/ตักบาตร/DSC_0757.JPG';
// // 	echo substr($test_path, strpos($test_path, '/'));
// 	echo $test_path = str_replace('images/thumbnail/', '', $test_path). "<br />";
// 	echo substr($test_path, strpos($test_path, '/'));
	
?>
<div style="margin: 0 auto;" id="home-details">
	<table border="0">
		<tr height="100">
			<td rowspan="2" width="200">
				<div class="rand-img-box flip5" style="height: 205px; width: 200px;">
					<?php 
					$j=0;
// 					while($j<$num_of_flip1){
					foreach($imgs205 as $value){
						?><div class="flipelm" imgfullsize="<?php echo getImgFullSizePath($value); ?>" style="background-image:url('<?php echo $value; ?>')"></div><?php
					}
					?>
				</div>
			</td>
			<td width="100">
				<div class="rand-img-box flip1" style="height: 100px; width: 100px;">
					<?php 
					$j=0;
					while($j<$num_of_flip1){
						?><div class="flipelm" imgfullsize="<?php echo getImgFullSizePath($imgs[$i]); ?>" style="background-image:url('<?php echo $imgs[$i]; ?>')"></div><?php
						$i++; $j++;
					}
					?>
				</div>
			</td>
			<td width="100" style="">
				<div class="rand-img-box flip2" style="height: 100px; width: 100px;">
					<?php 
					$j=0;
					while($j<$num_of_flip2){
						?><div class="flipelm" imgfullsize="<?php echo getImgFullSizePath($imgs[$i]); ?>" style="background-image:url('<?php echo $imgs[$i]; ?>')"></div><?php
						$i++; $j++;
					}
					?>
				</div>
			</td>
			<td rowspan="2" width="200">
				<div
					style="width: 100%; height: 200px; overflow: hidden; margin-top: -10px;">
					<a
						href="http://www.accuweather.com/th/th/selaphum/320360/weather-forecast/320360"
						class="aw-widget-legal"> <!--
					By accessing and/or using this code snippet, you agree to AccuWeather’s terms and conditions (in English) which can be found at http://www.accuweather.com/en/free-weather-widgets/terms and AccuWeather’s Privacy Statement (in English) which can be found at http://www.accuweather.com/en/privacy.
					-->
					</a>
					<div id="awcc1408260412824" class="aw-widget-current"
						data-locationkey="320360" data-unit="c" data-language="th"
						data-useip="false" data-uid="awcc1408260412824"></div>
				</div>
			</td>
		</tr>
		<tr height="100">
			<td style="">
				<div class="rand-img-box flip3" style="height: 100px; width: 100px;">
					<?php 
					$j=0;
					while($j<$num_of_flip3){
						?><div class="flipelm" imgfullsize="<?php echo getImgFullSizePath($imgs[$i]); ?>" style="background-image:url('<?php echo $imgs[$i]; ?>')"></div><?php
						$i++; $j++;
					}
					?>
				</div>
			</td>
			<td style="">
				<div class="rand-img-box flip4" style="height: 100px; width: 100px;">
					<?php 
					$j=0;
					while($j<$num_of_flip4){
						?><div class="flipelm" imgfullsize="<?php echo getImgFullSizePath($imgs[$i]); ?>" style="background-image:url('<?php echo $imgs[$i]; ?>')"></div><?php
						$i++; $j++;
					}
					?>
				</div>
			</td>
		</tr>
		<tr height="200">
			<td colspan="4">
				<iframe
					src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2F%25E0%25B8%2584%25E0%25B8%2593%25E0%25B8%25B0%25E0%25B8%25AA%25E0%25B8%2587%25E0%25B8%2586%25E0%25B9%258C%25E0%25B8%25AD%25E0%25B8%25B3%25E0%25B9%2580%25E0%25B8%25A0%25E0%25B8%25AD%25E0%25B9%2580%25E0%25B8%25AA%25E0%25B8%25A5%25E0%25B8%25A0%25E0%25B8%25B9%25E0%25B8%25A1%25E0%25B8%25B4-%25E0%25B8%2588%25E0%25B8%25B1%25E0%25B8%2587%25E0%25B8%25AB%25E0%25B8%25A7%25E0%25B8%25B1%25E0%25B8%2594%25E0%25B8%25A3%25E0%25B9%2589%25E0%25B8%25AD%25E0%25B8%25A2%25E0%25B9%2580%25E0%25B8%25AD%25E0%25B9%2587%25E0%25B8%2594%2F331123387028880&amp;width=600&amp;height=558&amp;colorscheme=light&amp;show_faces=true&amp;header=false&amp;stream=true&amp;show_border=true"
					scrolling="no" frameborder="0"
					style="border: none; overflow: hidden; width: 600px; height: 558px;"
					allowTransparency="true"></iframe>
			</td>
		</tr>
	</table>
</div>

<script type="text/javascript"
	src="http://oap.accuweather.com/launch.js"></script>
<script type="text/javascript">
function getRandomInt(min, max) {
	return Math.floor(Math.random() * (max - min)) + min;
}
function getRandomTime(){
	return getRandomInt(5000,10000);
}
function initQuickFlip(selector){
	var vertical = (getRandomInt(0,2)==0?false:true);
	jQuery(selector).quickFlip({vertical: vertical});
	recursive_flip(selector);
}
function recursive_flip(selector){
	setTimeout(function(){
		jQuery(selector).quickFlipper();
		setTimeout(function(){
			jQuery(selector).quickFlipper();
			recursive_flip(selector, getRandomTime());
		}, getRandomTime());
	}, getRandomTime());
}
jQuery(function() {
    
    initQuickFlip('.flip1');
    initQuickFlip('.flip2');
    initQuickFlip('.flip3');
    initQuickFlip('.flip4');
    initQuickFlip('.flip5');
    
    jQuery(".flipelm").click(function() {
		jQuery.fancybox.open(jQuery(this).attr('imgfullsize'));
	});
    
});
</script>